<template>
  <div>
    <!-- 头部信息 -->
    <!-- <el-header height="80px" style="padding: 10px;" >
        <div style="background: #F2F6FC; border-radius: 5px;">
            <div class="topbar">
                <div class="left-panel">
                    <el-button type="text" @click="back()"><i class="el-icon-back" style="font-size: 18px;"></i></el-button>
                    &nbsp;&nbsp;
                    限流规则:&nbsp;&nbsp;<span style="color:#6666CC;">{{currentFlow.flowName}}</span>
                </div>
            </div>
        </div>      
    </el-header> -->

    <el-container>
        <el-main>
            <el-card style="margin: 10px; min-height: 600px;">
                <el-descriptions title="配置详情" :column="1">
                    <template slot="extra">
                        <el-button type="info" icon="el-icon-back" @click="back()">返回</el-button>
                    </template>
                    <el-descriptions-item label="限流规则">{{flowData.flow.flowName}}</el-descriptions-item>
                    <el-descriptions-item label="限流类型"><el-tag size="small">单机</el-tag></el-descriptions-item>
                    <el-descriptions-item label="常规限流">
                        <el-table
                        :data="flowData.rules"
                        element-loading-text="加载数据中"
                        v-loading="loading"
                        :header-row-style="{height:45+'px'}"
                        :header-cell-style="{background:'#F2F6FC'}"
                        :row-style="{height:60+'px'}"
                        style="width: 650px; min-height: 100px;">
                            <el-table-column prop="ruleType" label="规则类型" ></el-table-column>
                            <el-table-column prop="ruleKey"  label="匹配目标" ></el-table-column>
                            <el-table-column prop="ruleQps"  label="QPS阈值" ></el-table-column>
                            <el-table-column label="操作" width="150">
                                <template slot="header">
                                    <el-button type="text" style="color: #67C23A;" @click="addRule()">添加规则</el-button>
                                </template>
                                <template slot-scope="scope">
                                    <el-button
                                        type="text"
                                        style="color: #F56C6C"
                                        icon="el-icon-delete"
                                        @click="removeRule(scope.$index)">删除</el-button>        
                                </template>
                            </el-table-column>
                            <template #empty>
                                <el-empty :description="'暂无规则'" :image-size="100"></el-empty>
                            </template>
                        </el-table>
                    </el-descriptions-item>
                    <el-descriptions-item label="热点参数">
                        <el-table
                        :data="flowData.params"
                        element-loading-text="加载数据中"
                        v-loading="loading"
                        :header-row-style="{height:45+'px'}"
                        :header-cell-style="{background:'#F2F6FC'}"
                        :row-style="{height:60+'px'}"
                        style="width: 650px; min-height: 100px;">
                            <el-table-column prop="methodUrl"    label="匹配路径" ></el-table-column>
                            <el-table-column prop="paramName"  label="参数名" ></el-table-column>
                            <el-table-column prop="paramType"  label="参数类型" ></el-table-column>
                            <el-table-column prop="paramValue"  label="参数值" ></el-table-column>
                            <el-table-column prop="qps"  label="QPS阈值" ></el-table-column>
                            <el-table-column prop="startTime"  label="开始时间" ></el-table-column>
                            <el-table-column prop="finishTime"  label="结束时间" ></el-table-column>
                            <el-table-column label="操作" width="150">
                                <template slot="header">
                                    <el-button type="text" style="color: #67C23A;" @click="addParam()">添加规则</el-button>
                                </template>
                                <template slot-scope="scope">
                                    <el-button
                                        type="text"
                                        style="color: #F56C6C"
                                        icon="el-icon-delete"
                                        @click="removeParam(scope.$index)">删除</el-button>        
                                </template>
                            </el-table-column>
                            <template #empty>
                                <el-empty :description="'暂无规则'" :image-size="100"></el-empty>
                            </template>
                        </el-table>
                    </el-descriptions-item>
                    <el-descriptions-item label="系统保护">
                        <el-card body-style="background-color: #f5f5f5;" style=" width: 100%;">
                            <el-form ref="form" :model="flowData.flow" label-width="130px">
                                <el-form-item label="全局QPS阈值">
                                    <el-input v-model="flowData.flow.sysQps" style="width: 200px;"></el-input>
                                </el-form-item>
                                <el-form-item label="CPU负载阈值">
                                    <el-input-number v-model="flowData.flow.sysCpu" controls-position="right" :min="1" :max="100"></el-input-number>
                                </el-form-item>
                                <el-form-item label="内存占用率阈值">
                                    <el-input-number v-model="flowData.flow.sysMemory" controls-position="right" :min="1" :max="100"></el-input-number>
                                </el-form-item>
                            </el-form>
                        </el-card>
                    </el-descriptions-item>
                    <el-descriptions-item label="拒绝策略">
                        <el-card body-style="background-color: #f5f5f5;" style=" width: 100%;">
                            <el-form ref="form" :model="flowData.flow" label-width="130px">
                                <el-form-item label="拒绝策略">
                                    <el-radio-group v-model="flowData.flow.rejectStrategy">
                                        <el-radio-button label="QUICK_FAIL">快速失败</el-radio-button>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item label="响应HTTP状态码">
                                    <el-input v-model="flowData.flow.rejectResponseStatus" style="width: 200px;" min="100" max="599"></el-input>
                                </el-form-item>
                                <el-form-item label="响应HTTP体内容">
                                    <el-input type="textarea" v-model="flowData.flow.rejectResponseContent" :rows="5" style="width: 500px;"></el-input>
                                </el-form-item>
                            </el-form>
                        </el-card>
                    </el-descriptions-item>
                </el-descriptions>
                <div style="width: 100%; text-align: center; margin-top: 10px; margin-bottom: 30px;">
                    <el-button type="primary" round @click="submit()">保存设置</el-button>
                </div>
            </el-card>
        </el-main>
    </el-container>

    <add-rule ref="AddRule" @success="addRuleSuccess"></add-rule>
    <add-param ref="AddParam" @success="addParamSuccess"></add-param>
  </div>
</template>

<script>
import AddRule from './modules/add_rule.vue'
import AddParam from './modules/add_param.vue'

export default {
    components: {
        AddRule, AddParam
    },
    data() {
        return {
            // 查询表单
            searchForm: {
                configGroupId: null,
                configId: null,
                searchText: ''
            },
            currentFlow: {
                id: null,
                flowName: ''
            },
            flowData: {
                flow: {},
                rules: [],
                params: []
            },
            loading: false
        }
    },
    created() {
        this.currentFlow.id = this.$route.query.flowId
        this.currentFlow.flowName = this.$route.query.flowName
    },
    mounted() {
        this.getById()
    },
    watch: {
       
    },
    methods: {
        /**
         * @title 获取列表
         */
        async getById() {
            this.loading = true
            const flowId = this.$route.query.flowId
            try {
                let response = await this.$API.flow.getById(flowId)   
                this.flowData = response.data
            } finally{
                this.loading = false
            }
        },

        addRule() {
            this.$nextTick(() => {
                this.$refs.AddRule.open() 
            })
        },

        addRuleSuccess(row) {
            if (row != null && row != 'Undefined') {
                this.flowData.rules.push(JSON.parse(row))        
            }
        },

        removeRule(index) {
            this.flowData.rules.splice(index, 1)   
        },

        addParam() {
            this.$nextTick(() => {
                this.$refs.AddParam.open() 
            })     
        },

        addParamSuccess(row) {
            if (row != null && row != 'Undefined') {
                this.flowData.params.push(JSON.parse(row))        
            }
        },

        removeParam(index) {
            this.flowData.params.splice(index, 1)   
        },

        async submit() {
            let response = await this.$API.flow.update(this.flowData)
            this.$message.success(response.message)
            this.getById()
        },

        back() {
            this.$router.back(-1)
        },
    }
}
</script>

<style lang="scss" scoped>
.el-main {
    width: 100%;
    height: 100%;
    padding: 0;
}
</style>

<style lang="scss">
body > .el-container {
    margin-bottom: 40px;
    height: 100%;
}

body html{
    height: 100%;
}
</style>
